<template>
    <div class="index-box">
        <div class="class-box">
            <div class="top-class">
                <el-input v-model="searchParams.name" class="w-50 m-2" size="large" placeholder="请输入课程/授课教师名称" :suffix-icon="Search" />
                <el-select v-model="value" class="m-2" placeholder="全部专业" size="large" >
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="searchParams.courseType" class="m-2" placeholder="全部课程类型" size="large" >
                    <el-option v-for="item in courseTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="searchParams.publishStatus" class="m-2" placeholder="全部课程状态" size="large" >
                    <el-option v-for="item in publishStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="items">
                                <el-button @click="coursePage">
                                    <el-icon>
                                        <Search />
                                    </el-icon>查询
                                </el-button>
                            </div>
            </div>
            <div class="class-info">
                <div class="card-box" v-for="(item,index) in courseList" :key="index" @click="toDetail(item)">
                    <div class="card-top-box">
                        <div class="left">
                            <img src="@/assets/class.png" alt="">
                            <span>{{ item.courseType === 1?'必修课':'选修课' }}</span>
                        </div>
                        <div class="right">
                            <span></span>
                            <span>{{ item.publishStatus === 1?'已发布':'未发布' }}</span>
                        </div>
                    </div>
                    <div class="class-info-box">
                        <div class="left">
                            <div class="title">{{ item.courseName }}</div>
                            <div class="sub-title">{{ item.college }}</div>
                            <div class="teacher">{{ item.teacher }}</div>
                        </div>
                        <div class="right">
                            <img src="@/assets/class-icon.png" alt="">
                        </div>
                    </div>
                    <div class="tages">
                        <span class="blue">{{ item.courseCategory }}</span>
                        <span class="green">{{ item.teachingMode }}</span>
                    </div>
                    <el-divider />
                    <div class="knowledge-box">
                        <div class="knowledge">
                            <span>知识点</span>
                            <div class="nums">
                                <img src="@/assets/fonts/blue/2.png" alt="">
                                <img src="@/assets/fonts/blue/3.png" alt="">
                            </div>
                        </div>
                        <div class="knowledge">
                            <span>知识点</span>
                            <div class="nums">
                                <img src="@/assets/fonts/blue/2.png" alt="">
                                <img src="@/assets/fonts/blue/3.png" alt="">
                            </div>
                        </div>
                        <div class="knowledge">
                            <span>知识点</span>
                            <div class="nums">
                                <img src="@/assets/fonts/blue/2.png" alt="">
                                <img src="@/assets/fonts/blue/3.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pages">
                <el-pagination background layout="prev, pager, next" :total="courseList.length" v-model:current-page="searchParams.pageNum" @current-change="coursePage"/>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import { Search } from '@element-plus/icons-vue'
    import { useRouter,useRoute } from 'vue-router';
    import api from '@/api/index'

    const route = useRoute();
    const { activeItem,activeChild,activeChildIndex } = route.query;
    const searchParams = ref({pageNum:1, pageSize:15})
    const courseList = ref([])
    const courseTypeOptions = ref([
        {value: 1, label: '必修课'},
        {value: 2, label: '选修课'},
    ])
    const publishStatusOptions = ref([
        {value: 1, label: '已发布'},
        {value: 2, label: '未发布'},
    ])
    const options = [
        {
            value: 'Option1',
            label: 'Option1',
        },
        {
            value: 'Option2',
            label: 'Option2',
        },
        {
            value: 'Option3',
            label: 'Option3',
        },
        {
            value: 'Option4',
            label: 'Option4',
        },
        {
            value: 'Option5',
            label: 'Option5',
        },
    ]
    const router = useRouter();
    const toDetail = (item) => {
        router.push({ name: 'detail', query: { activeItem: activeItem,activeChild: activeChild,activeChildIndex:activeChildIndex,id:item.id } });
    }
    const coursePage = async ()=>{
        let res = await api.course_page({teacherId: JSON.parse( localStorage.getItem("user")).id,...searchParams.value})
        courseList.value = res.list
    }
    coursePage()
</script>

<style scoped>
    .el-input, .el-select{width: 100%!important;}
    .top-class .el-input__wrapper{background: #F2F3FA;}
    .top-class .el-select__wrapper{background: #F2F3FA;}
    .el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .el-pager li.is-active{background: #1364E0;}
    .index-box{position: relative;}
    .class-box{padding-bottom: 30px;background: #fff;border-radius: 8px;}
    .top-class{display: flex;flex-direction: row;gap: 30px;width: 80%;justify-content: start;padding: 30px 0 0 30px;}
    .class-info{display: flex;flex-wrap: wrap;margin-left: 10px;margin-top: 10px;}
    .card-box{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);border-radius: 10px;min-width: 270px;min-height: 250px; cursor: pointer; margin: 1%; max-width: 18%;border: 1px solid #fff; flex: 1 0 calc(18% - 5px); }
    .class-info .card-box:hover{border: 1px solid #2D7BF3;box-shadow: 0px 0px 10px 0px rgba(5,87,213,0.2);}
    .card-box .card-top-box{display: flex;flex-direction: row;justify-content: space-between;}
    .card-box .card-top-box .left{display: flex;flex-direction: row;position: relative;}
    .card-box .card-top-box .left img{width: 90px;height: 25px;}
    .card-box .card-top-box .left span{color: #fff;position: absolute;left: 0;top: 0;text-align: center;width: 90px;font-size: 14px;line-height: 25px;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .card-box .card-top-box .right{display: flex;flex-direction: row;position: relative;align-items: center;}
    .card-box .card-top-box .right span{color: #E2B17B;}
    .card-box .card-top-box .right span:first-child{display: block;width: 6px;height: 6px;background: #E2B17B;border-radius: 6px;margin-top: 3px}
    .card-box .card-top-box .right span:last-child{margin-left: 5px;margin-right: 20px;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun;padding: 2px 0 0 0;}
    .class-info-box{display: flex;flex-direction: row;justify-content: space-between;margin-top: 20px;}
    .class-info-box .left{padding-left: 40px;text-align: left;}
    .class-info-box .left .title{font-size: 16px;font-weight: 600;color: #000;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .class-info-box .left .sub-title,.teacher{font-size: 14px;font-weight: 400;color: #747474;font-family: 微软雅黑, Microsoft YaHei, SimSun;margin-top: 10px;}
    .class-info-box .right{padding-right: 40px;}
    .class-info-box .right img{width: 100px;height: 100px;}
    .tages{display: flex;flex-direction: row;justify-content: start;margin-left: 20px;}
    .tages span{display: block;width: 80px;height: 25px;border-radius: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;line-height: 25px;margin-left: 10px;cursor: pointer;}
    .blue{color: #3869E7;border: 1px solid #3869E7;background: rgba(56,105,231,0.2);}
    .green{color: #217F10;border: 1px solid #5ACA45;background: rgba(90,202,69,0.2);}
    .knowledge-box{display: flex;flex-direction: row;justify-content: space-around;padding-bottom: 10px;margin-top: -10px;}
    .knowledge .nums{display: flex;align-items: center;margin-top: 5px;}
    .knowledge .nums img{width: 20px;}
    .pages{width: 96%;margin: 10px auto;display: flex;flex-direction: row;justify-content: end;}
    .items {
    display: flex;
    align-items: center;
}
</style>